<template>
    <div class="quick-jump">
        <div class="jump-left">
            <template v-if="baseIndex == 1">
                <el-icon size="16" color="#4c4c4c"><CaretLeft /></el-icon>
                <span @click="jumpToPage(baseOptionsList[0].value)">{{baseOptionsList[0].label}}</span>
            </template>
            <template v-if="baseIndex == 2">
                <el-icon size="16" color="#4c4c4c"><CaretLeft /></el-icon>
                <span @click="jumpToPage(baseOptionsList[1].value)">{{baseOptionsList[1].label}}</span>
            </template>
        </div>
        <div class="jump-center">
            <el-select v-model="selectedValue" class="m-2" placeholder="" style="width: 200px" @change="jumpToPage">
                <el-option v-for="(item, index) in optionsList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="jump-right">
            <template v-if="baseIndex == 0">
                <span @click="jumpToPage(baseOptionsList[1].value)">{{baseOptionsList[1].label}}</span>
                <el-icon size="16" color="#4c4c4c"><CaretRight /></el-icon>
            </template>
            <template v-else-if="baseIndex == 1">
                <span @click="jumpToPage(baseOptionsList[2].value)">{{baseOptionsList[2].label}}</span>
                <el-icon size="16" color="#4c4c4c"><CaretRight /></el-icon>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
// 父组件传进来的参数
const props = defineProps<{
    url?: string
}>()
const selectedValue = ref(props.url)
const optionsList = ref([
    {
        label: t('navigation.menu_1_2_3'),
        value: "/console/mod/announcement",
    },
    {
        label: t('navigation.menu_1_2_4'),
        value: "/console/mod/book",
    },
    {
        label: t('navigation.menu_1_2_5'),
        value: "/console/mod/contact",
    }
])

// 原始数据
const baseOptionsList = ref([
    {
        label: t('navigation.menu_1_2_3'),
        value: "/console/mod/announcement",
    },
    {
        label: t('navigation.menu_1_2_4'),
        value: "/console/mod/book",
    },
    {
        label: t('navigation.menu_1_2_5'),
        value: "/console/mod/contact",
    }
])
const baseIndex = ref(0)
optionsList.value.map((item, index) => {
    if(item.value == props.url){
        baseIndex.value = index;
        item.label = t('navigation.menu_jump_txt')
        optionsList.value.splice(index, 1);
        optionsList.value.unshift(item);
    }
})
console.log(optionsList);
// 监听 message 变化
// watch(
//   () => props.url,
//   (newVal, oldVal) => {
//     console.log('message 变化了', newVal, oldVal);
    
//   }
// );
// 跳轉頁面
import { useRouter } from 'vue-router'
const router = useRouter()
const jumpToPage = (url: string) => {
    router.push({
        path: url,
    })
}


defineExpose({
    
})





onMounted(() => {})
</script>

<style scoped lang="less">
.quick-jump{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    padding: 10px 20px;
    margin-top: 15px;
    background-color: #F9F9F9;
    .jump-left{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
        span{
            font-size: 14px;
            color: #333333;
            cursor: pointer;
        }
    }
    .jump-center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .jump-right{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 5px;
        span{
            font-size: 14px;
            color: #333333;
            cursor: pointer;
        }
    }
}
</style>
